<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo" @click="back">
        示例页面
      </div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['element']" :open-keys="['element']" @click="toItem">
        <a-sub-menu key="element">
          <span slot="title">
            <span>布局元素</span></span>
          <a-menu-item key="0">
            边框
          </a-menu-item>
          <a-menu-item key="1">
            元素
          </a-menu-item>
          <a-menu-item key="2">
            装饰
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px', height: '100vh'}">
      <a-layout-content :style="{ margin: '16px 16px', background: '#fff', overflow: 'auto' }">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: 'Index',
  props: {},
  data() {
    return {
      routerList: [
        '/element/border',
        '/element/index',
        '/element/decoration'
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    toItem(item) {
      this.$router.push(this.routerList[item.key])
    },
    back() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
    font-size: 20px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>
